<div class="app_main">
	<h1>基于Angular的打印组件，可打印HTML和文本</h1>
	<h2>打印的内容</h2>
	<div id="print_div" #print_div>
		<table class="table table-striped">
			<thead *ngIf="showHead">
			<tr>
				<th>#</th>
				<th id="th_green">First Name</th>
				<th>Last Name</th>
				<th>Username</th>
			</tr>
			</thead>
			<tbody>
			<tr *ngFor="let user of datas; let i = index">
				<td class="td_blue">{{i}}</td>
				<td>{{user?.firstName}}</td>
				<td>{{user?.lastName}}</td>
				<td>{{user?.userName}}</td>
			</tr>
			</tbody>
		</table>
		<table *ngIf="hideTable1" id="table1" class="table table-striped">
			<thead>
			<tr>
				<th>#</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Username</th>
			</tr>
			</thead>
			<tbody>
			<tr *ngFor="let user of datas; let i = index">
				<td>{{i}}</td>
				<td>{{user?.firstName}}</td>
				<td>{{user?.lastName}}</td>
				<td>{{user?.userName}}</td>
			</tr>
			</tbody>
		</table>
		<h3 *ngIf="hideTable1">打印表单元素</h3>
		<form *ngIf="hideTable1">
			<input type="text" name="t1" [(ngModel)]="testObj.t1">
			<input type="checkbox" name="t2" [(ngModel)]="testObj.t2" value="1">
			<input type="radio" name="t3" [(ngModel)]="testObj.t3" value="2">
			<textarea name="t4" [(ngModel)]="testObj.t4"></textarea>
			<select name="t5" [(ngModel)]="testObj.t5">
				<option value="1">1</option>
				<option value="2">2</option>
			</select>
		</form>
	</div>
	<h2>两种打印模式（iframe and popup）- 打印指定html</h2>
	<div>
		<e-ngx-print
			[btnText]="'iframe模式'"
			[btnClass]="{'btn': true, 'btn-success': true}"
			[printHTML]="print_div"
			[printStyle]="printStyle"
			[printCSS]="printCSS"
			(printComplete)="printComplete()">
		</e-ngx-print>
	</div>
	<div>
		<e-ngx-print
			[mode]="'popup'"
			[popTitle]="'表格打印'"
			[btnText]="'popup模式'"
			[btnClass]="{'btn': true, 'btn-warning': true}"
			[printHTML]="print_div"
			[printStyle]="printStyle"
			[printCSS]="printCSS"
			(printComplete)="printComplete()">
		</e-ngx-print>
	</div>
	<h2>打印指定字符串</h2>
	<div>
		<e-ngx-print
			[btnText]="'iframe模式'"
			[btnClass]="{'btn': true, 'btn-success': true}"
			[printHTML]="editorText"
			(printComplete)="printComplete()">
		</e-ngx-print>
	</div>
	<div>
		<e-ngx-print
			[mode]="'popup'"
			[popTitle]="'表格打印'"
			[btnText]="'popup模式'"
			[btnClass]="{'btn': true, 'btn-warning': true}"
			[printHTML]="editorText"
			(printComplete)="printComplete()">
		</e-ngx-print>
	</div>
	<h2>自定义打印（将隐藏的html显示并打印）</h2>
	<div>
		<e-ngx-print #print1
						   [showBtn]="false"
						   [printStyle]="printStyle"
						   [printCSS]="printCSS"
						   (printComplete)="printComplete()">
		</e-ngx-print>
		<button class="btn btn-success" (click)="customPrint('print1')">iframe模式</button>
	</div>
	<div>
		<e-ngx-print #print2
						   [mode]="'popup'"
						   [popTitle]="'表格打印'"
						   [showBtn]="false"
                           [printHTML]="print_div"
						   [printStyle]="printStyle"
						   [printCSS]="printCSS"
						   (printComplete)="printComplete()">
		</e-ngx-print>
		<button class="btn btn-warning" (click)="customPrint('print2')">popup模式</button>
	</div>
</div>
